<template>
	<view
		class="v-loadmore"
		:style="[
			$u.addStyle(customStyle),
			{
				backgroundColor: bgColor,
				marginBottom: $u.addUnit(marginBottom),
				marginTop: $u.addUnit(marginTop),
				height: $u.addUnit(height),
			},
		]"
	>
		<v-line
			length="140rpx"
			:color="lineColor"
			:hairline="false"
			:dashed="dashed"
			v-if="line"
		></v-line>
		<!-- 加载中和没有更多的状态才显示两边的横线 -->
		<view
			:class="status == 'loadmore' || status == 'nomore' ? 'v-more' : ''"
			class="v-loadmore__content"
		>
			<view
				class="v-loadmore__content__icon-wrap"
				v-if="status === 'loading' && icon"
			>
				<v-loading-icon
					:color="iconColor"
					:size="iconSize"
					:mode="loadingIcon"
				></v-loading-icon>
			</view>
			<!-- 如果没有更多的状态下，显示内容为dot（粗点），加载特定样式 -->
			<text
				class="v-line-1"
				:style="[loadTextStyle]"
				:class="[
					status == 'nomore' && isDot == true
						? 'v-loadmore__content__dot-text'
						: 'v-loadmore__content__text',
				]"
				@tap="loadMore"
				>{{ showText }}</text
			>
		</view>
		<v-line
			length="140rpx"
			:color="lineColor"
			:hairline="false"
			:dashed="dashed"
			v-if="line"
		></v-line>
	</view>
</template>

<script>
import props from "./props.js";
import mpMixin from "../../libs/mixin/mpMixin.js";
import mixin from "../../libs/mixin/mixin.js";

/**
 * loadmore 加载更多
 * @description 此组件一般用于标识页面底部加载数据时的状态。
 * @property {String}			status			组件状态（默认 'loadmore' ）
 * @property {String}			bgColor			组件背景颜色，在页面是非白色时会用到（默认 'transparent' ）
 * @property {Boolean}			icon			加载中时是否显示图标（默认 true ）
 * @property {String | Number}	fontSize		字体大小（默认 14 ）
 * @property {String | Number}	iconSize		图标大小（默认 17 ）
 * @property {String}			color			字体颜色（默认 '#606266' ）
 * @property {String}			loadingIcon		加载图标（默认 'circle' ）
 * @property {String}			loadmoreText	加载前的提示语（默认 '加载更多' ）
 * @property {String}			loadingText		加载中提示语（默认 '正在加载...' ）
 * @property {String}			nomoreText		没有更多的提示语（默认 '没有更多了' ）
 * @property {Boolean}			isDot			到上一个相邻元素的距离 （默认 false ）
 * @property {String}			iconColor		加载中图标的颜色 （默认 '#b7b7b7' ）
 * @property {String}			lineColor		线条颜色（默认 #E6E8EB ）
 * @property {String | Number}	marginTop		上边距 （默认 10 ）
 * @property {String | Number}	marginBottom	下边距 （默认 10 ）
 * @property {String | Number}	height			高度，单位px （默认 'auto' ）
 * @property {Boolean}			line			是否显示左边分割线  （默认 false ）
 * @property {Boolean}			dashed		// 是否虚线，true-虚线，false-实线  （默认 false ）
 * @event {Function} loadmore status为loadmore时，点击组件会发出此事件
 * @example <v-loadmore :status="status" icon-type="iconType" load-text="loadText" />
 */
export default {
	name: "v-loadmore",
	mixins: [mpMixin, mixin, props],
	data() {
		return {
			// 粗点
			dotText: "●",
		};
	},
	computed: {
		// 加载的文字显示的样式
		loadTextStyle() {
			return {
				color: this.color,
				fontSize: uni.$u.addUnit(this.fontSize),
				lineHeight: uni.$u.addUnit(this.fontSize),
				backgroundColor: this.bgColor,
			};
		},
		// 显示的提示文字
		showText() {
			let text = "";
			if (this.status == "loadmore") text = this.loadmoreText;
			else if (this.status == "loading") text = this.loadingText;
			else if (this.status == "nomore" && this.isDot) text = this.dotText;
			else text = this.nomoreText;
			return text;
		},
	},
	emits: ["loadmore"],
	methods: {
		loadMore() {
			// 只有在“加载更多”的状态下才发送点击事件，内容不满一屏时无法触发底部上拉事件，所以需要点击来触发
			if (this.status == "loadmore") this.$emit("loadmore");
		},
	},
};
</script>

<style lang="scss" scoped>
@import "../../libs/css/components.scss";

.v-loadmore {
	@include flex(row);
	align-items: center;
	justify-content: center;
	flex: 1;

	&__content {
		margin: 0 15px;
		@include flex(row);
		align-items: center;
		justify-content: center;

		&__icon-wrap {
			margin-right: 8px;
		}

		&__text {
			font-size: 14px;
			color: $v-content-color;
		}

		&__dot-text {
			font-size: 15px;
			color: $v-tips-color;
		}
	}
}
</style>
